<template>
    <div class="sectop_mm">
        <div class="sectop">
            <div class="sectop_m">
                <p>一级消费者：{{memListM.down1}}人</p>
                <p>二级消费者：{{memListM.down2}}人</p>
                <p>三级消费者：{{memListM.down3}}人</p>
            </div>
            <div class="sectop_l">
                <p>{{memListM.totalnum}}</p>
                <span>全部成员/人</span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: `member-list-statistics`,
    props: {
      memListM: {
        type: Object
      }
    },
    data() {
      return {
        memList: this.memListM
      };
    },
    methods: {
      demo() {
        console.log(this.memList, 'memListM');
      }
    },
    created() {
      this.demo();
    }
  }
  ;
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .space {
        space();
    }

    .sectop_mm {
        width 100vw;
        box-sizing border-box;
    }

    .sectop {
        flex-x();
        width 100%;
        padding: 0 6vw;
        box-sizing border-box;
        background #fff;
        height vw(100px)
        & > p {
            word(16px, #333);
            flex-y();
            justify-content: flex-start;
            height 14vw
        }
        & .sectop_m {
            flex-y();
            align-items: flex-start;
            flex: 1;
            & > p {
                word(13px, #666);
                line-height: vw(19px)
            }
        }
        & .sectop_l {
            & p {
                word(18px, #333);
                text-align: right
            }
            & span {
                word(13px, #666)
            }
        }
    }

</style>
